<div class="nav-side-menu">
  <div class="brand">Member\'s Help</div>
  <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>

  <div class="menu-list">

    <ul id="menu-content" class="menu-content collapse out">
      <li>
        <a [routerLink]="['content',1]">
          <i class="fa fa-dashboard fa-lg"></i> Property Details
        </a>
      </li>
      <li >
        <a [routerLink]="['content',7]">Management Agreement</a>
      </li>
      <!-- collapsed  折叠 -->
      <li data-toggle="collapse" data-target="#products" class="collapsed ">
        <a >
          <i class="fa fa-gift fa-lg"></i> Property Resources
          <span class="arrow"></span>
        </a>
      </li>
      <ul class="sub-menu collapse" id="products">
        <li >
          <a [routerLink]="['content',3]">Contract of Sale</a>
        </li>
        <li >
          <a [routerLink]="['content',4]">Deposit Form</a>
        </li>
        <li >
          <a [routerLink]="['content',5]">Solicitor Contract</a>
        </li>
        <li >
          <a [routerLink]="['content',6]">Bills & Charges</a>
        </li>
        <li >
          <a [routerLink]="['content',7]">Management Agreement</a>
        </li>

        <li >
          <a [routerLink]="['content',7]">Others</a>
        </li>

      </ul>

      <li>
        <a [routerLink]="['content',8]">
          <i class="fa fa-dashboard fa-lg"></i> Recommended App
        </a>
      </li>


      <li>
        <a href="#">
          <i class="fa fa-user fa-lg"></i> FAQs
        </a>
      </li>


    </ul>
  </div>
</div>